<template>
  <el-tabs v-model="current" @tab-change="tabClick">
    <el-tab-pane v-for="(item,index) in tabs" :key="index" :label="item.title" :name="item.name" />
  </el-tabs>
  <div>
    <router-view/>
  </div>
</template>
<script setup>
import {useRouter} from 'vue-router'
import {reactive, ref} from "vue";


const router = useRouter()

let current = ref('')


const tabClick= (tab)=>{
  router.push({
    path:current.value
  })
}

const tabs = reactive([{
  title: '首页',
  name: 'index'
},{
  title: '家谱图',
  name: 'tree'
},{
  title: '人物管理',
  name: 'people'
}, {
  title: '关系管理',
  name: 'spouse'
}, {
  title: '事件管理',
  name: 'event'
}])
</script>
